<template>
    <div class="treelist">
        <div class="treeitem">
            <div class="treename" :style="{ paddingLeft: level * 20 + 'rem' }" :class="{ active: selectId == item[nodeKey] }" @click="nameClick">
                <div class="iconView" :class="{ show: expand }">
                    <Icon type="ios-arrow-down" @click.stop="expand = !expand" v-show="item.children && item.children.length" />
                </div>
                <div class="CheckButton" @click.stop="changeTreeNodeValue(!checked)">
                    <Checkbox v-model="checked" :indeterminate="indeterminate"></Checkbox>
                </div>
                <span>{{ item[labelKey] }}</span>
            </div>
            <CollapseTransition>
                <div v-show="expand">
                    <treeItem
                        ref="child"
                        :nodeKey="nodeKey"
                        :labelKey="labelKey"
                        :showAll="showAll"
                        :parentKey="item[nodeKey]"
                        :item="child"
                        :selectId="selectId"
                        :parentItem="this"
                        :level="level + 1"
                        v-for="(child, index) in item.children"
                        :key="'tree' + index"
                    ></treeItem>
                </div>
            </CollapseTransition>
        </div>
    </div>
</template>
<script>
import CollapseTransition from 'view-design/src/components/base/collapse-transition'
export default {
    // 组件递归嵌套的标签名
    name: 'treeItem',
    // 入参和子组件传参需要保持一致
    props: ['item', 'level', 'parentItem', 'nodeKey', 'showAll', 'parentKey', 'labelKey', 'selectId'],
    // 对应父组件 的 provide 方法，直接对父级组件的数据进行操作
    inject: ['setTreeNode', 'setChildchecked', 'refreshEvent', 'clickEvent'],
    components: {
        // Iview 的伸缩组件
        CollapseTransition
    },
    data() {
        return {
            // 用于标记选中状态
            checked: false,
            // 用于标记展开收起状态
            expand: !!this.showAll,
            // 用于标记半选状态
            indeterminate: false
        }
    },
    mounted() {
        // 加载后，如果数据为 选中状态，则对数据进行缓存，当全部节点处理完毕，再进行赋值操作
        if (this.item.checked) {
            this.setChildchecked(this.item[this.nodeKey])
        }
        // 当组件渲染完毕时，向父组件添加对象缓存
        this.$nextTick(() => {
            this.setTreeNode(this)
        })
    },
    methods: {
        // 改变 父子组件选中 值状态
        changeTreeNodeValue(val) {
            this.refreshEvent(this, val)
        },
        // 树组件名称元素点击事件处理方式
        nameClick() {
            this.clickEvent(this)
        }
    }
}
</script>

<style lang="less" scoped>
.iconView {
    display: inline-block;
    width: 25rem;
    height: 20rem;
    text-align: center;
    line-height: 20rem;
    transition: transform 0.3s;
    transform: rotateZ(-90deg);
}

.iconView.show {
    transform: rotateZ(0deg);
}

.treename {
    cursor: pointer;
    padding: 2rem;
}

.treename:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.treename.active {
    background-color: rgba(12, 190, 131, 0.5);
    // color: #000;
}

.CheckButton {
    display: inline-block;
    position: relative;

    &::before {
        z-index: 2;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
</style>
